<template>
  <div class="app-container om-report-box">
    <!-- 搜索数据 -->
    <el-form
      :inline="true"
      class="top-box"
      label-width="68px"
      style="margin-bottom: 20px"
    >
      <el-input
        v-model="searchForm.searchCode"
        placeholder="销售订单号"
        clearable
      />
      <el-input
        v-model="searchForm.searchCustomer"
        placeholder="客户名称"
        clearable
      />
      <el-input
        v-model="searchForm.searchWorkStaff"
        placeholder="销售员"
        clearable
        style="width: 150px"
      />
      <el-input
        v-model="searchForm.searchName"
        placeholder="物料名称"
        clearable
      />
      <el-date-picker
        v-model="valueDate"
        type="daterange"
        align="right"
        unlink-panels
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      <el-form-item>
        <el-button
          type="primary"
          v-hasPermi="['om:report:query']"
          icon="el-icon-search"
          @click="searchList"
          >搜索
        </el-button>
        <!-- <el-button icon="el-icon-refresh" v-hasPermi="['om:report:query']" @click="serchReset()">重置
        </el-button> -->
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8 operation-btn">
      <el-col :span="1.5">
        <el-button
          type="primary"
          v-hasPermi="['om:report:query']"
          plain
          icon="el-icon-menu"
          size="mini"
          @click="checkleAll"
          >查询所有</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          v-hasPermi="['om:report:export']"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          v-hasPermi="['om:report:print']"
          plain
          icon="el-icon-printer"
          size="mini"
          @click="handlePrint"
          >打印</el-button
        >
      </el-col>
    </el-row>
    <!-- 打印数据 -->
    <PrintPage
      v-if="printStatus"
      :printData="printData"
      ref="startPrint"
      :title="printName"
    />
    <!-- 物料数据 -->
    <el-table
      v-loading="loading"
      ref="tableData"
      :data="basicfileList"
      border
      :height="maxHeight"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        type="index"
        width="60"
        align="center"
        label="序号"
        :key="1"
      >
      </el-table-column>
      <el-table-column
        label="销售订单号"
        align="center"
        prop="omCode"
        width="180"
      >
      </el-table-column>
      <el-table-column
        label="客户名称"
        align="center"
        prop="customer"
        width="220px"
      >
      </el-table-column>
      <el-table-column
        label="销售员"
        align="center"
        prop="workStaff"
        width="80"
      >
      </el-table-column>
      <el-table-column
        label="单据日期"
        align="center"
        prop="invoiceDate"
        width="120"
      >
      </el-table-column>
      <el-table-column
        label="物料编码"
        align="center"
        prop="invCode"
        width="120"
      >
      </el-table-column>
      <el-table-column
        label="物料名称"
        align="center"
        prop="invName"
        width="250"
      >
        <template v-slot="scope">
          <div>
            <span>{{ scope.row.invName }} {{ scope.row.invAttribute }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发货数量" align="center">
        <template slot-scope="scope">
          <div style="text-align: right">
            <span>{{ scope.row.quantity }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="出库数量" align="center">
        <template slot-scope="scope">
          <div style="text-align: right">
            <span>{{ scope.row.wiQuantity }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="未出库数量" align="center">
        <template slot-scope="scope">
          <div style="text-align: right">
            <span>{{ scope.row.notWiQuantity }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分类查询分页信息 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListDeliverReport"
    />
  </div>
</template>

<script>
import {
  dictMatching,
  listDeliverReport,
  exportDeliverReport,
} from "../../api/report"; //物料接口
import PrintPage from "../../components/Report/deliveryPriint"; //打印组件
import print from "print-js"; //打印js
export default {
  name: "",
  data() {
    return {
      // 遮罩层
      loading: true,
      //物料数据最大高度
      maxHeight: null,
      //搜索参数
      searchForm: {
        searchCode: "",
        searchCustomer: "",
        searchWorkStaff: "",
        searchName: "",
        startDate: "",
        endDate: "",
        searchSaleType: "",
      },
      // 开始时间/结束时间配置
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      valueDate: [],
      // 订单执行明细查询
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        invName: "",
        omCode: "",
        saleType: "",
        workStaff: "",
        customer: "",
        startDate: "",
        endDate: "",
        searchValue: false,
      },
      basicfileList: [],
      // 总条数
      total: 0,
      //单据参数信息
      parametersSetting: {
        decimalQuantity: "2", //数量小数位数
        decimalPrice: "2",
      },
      //打印名称
      printName: "",
      printTypeName: "",
      //打印组件状态
      printStatus: false,
      //打印数据
      printData: [],
      rules: {},
    };
  },
  created() {
    this.valueDate = [new Date(this.timeMounceDay(new Date())), new Date()];
    if (this.$route.query.searchType == "true") {
      this.queryParams.searchValue = true;
    } else {
      this.queryParams.searchValue = false;
    }
    this.$nextTick(() => {
      this.getListDeliverReport();
    });
  },

  methods: {
    //报表
    getListDeliverReport() {
      // 日期转换
    if (this.valueDate !== undefined &&this.valueDate !== null && this.valueDate.length > 0) {
        this.queryParams.startDate = this.parseTime(this.valueDate[0]);
        this.queryParams.endDate = this.parseTime(this.valueDate[1]);
      } else {
        this.queryParams.startDate = "";
        this.queryParams.endDate = "";
      }

      listDeliverReport(this.queryParams).then((res) => {
        if (res.code == 200) {
          if (res.rows.length > 0) {
            this.basicfileList = res.rows;
            this.getDecimal();
          } else {
            this.basicfileList = [];
          }
          this.total = res.total;
          this.maxHeight = `${document.documentElement.clientHeight}` - 270;
          this.loading = false;
        }
      });
    },

    //变色
    tableRowClassName({ row, rowIndex }) {
      if (row.tag == 1) {
        return "warning-row";
      }
    },

    //搜索物料开始日期
    searchListStart() {
      // 日期转换
      if (this.valueDate !== undefined &&this.valueDate !== null && this.valueDate.length > 0) {
        this.queryParams.startDate = this.parseTime(this.valueDate[0]);
        this.queryParams.endDate = this.setTime(this.valueDate[1]);
      } else {
        this.queryParams.startDate = "";
        this.queryParams.endDate = "";
      }
      this.getListDeliverReport();
    },

    //搜索物料结束日期
    searchListEnd() {
      if (
        this.searchForm.endDate !== "" &&
        this.searchForm.endDate !== null &&
        this.searchForm.endDate !== undefined
      ) {
        this.searchForm.endDate = this.setTime(this.searchForm.endDate);
      } else {
        this.queryParams.endDate = "";
      }
      this.getListDeliverReport();
    },

    // 搜索
    searchList() {
      this.queryParams.omCode = this.searchForm.searchCode;
      this.queryParams.invName = this.searchForm.searchName;
      this.queryParams.customer = this.searchForm.searchCustomer;
      this.queryParams.saleType = this.searchForm.searchSaleType;
      this.queryParams.workStaff = this.searchForm.searchWorkStaff;
      this.getListDeliverReport();
    },

    // 查询所有
    checkleAll() {
      //清空搜索信息，避免干扰
      (this.searchForm = {
        searchCode: "",
        searchCustomer: "",
        searchWorkStaff: "",
        searchName: "",
        startDate: "",
        endDate: "",
        searchSaleType: "",
      }),
        (this.valueDate = []);
      // 订单执行明细查询
      this.queryParams = {
        pageNum: 1,
        pageSize: 100,
        invName: "",
        omCode: "",
        saleType: "",
        workStaff: "",
        customer: "",
        startDate: "",
        endDate: "",
      };
      if (this.$route.query.searchType == "true") {
        this.queryParams.searchValue = true;
      } else {
        this.queryParams.searchValue = false;
      }
      this.getListDeliverReport();
    },

    //导出
    handleExport() {
      let queryParams = this.queryParams,
        title = "";
      if (this.$route.query.searchType == "true") {
        title = "发出商品明细表";
      } else {
        title = "发货通知明细表";
      }
      this.$confirm(`是否确认导出${title}?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportDeliverReport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },

    // 打印
    handlePrint() {
      let number = 1,
        title = "";
      this.basicfileList.forEach((item) => {
        item.number = number++;
      });
      this.printData = this.basicfileList;
      if (this.$route.query.searchType == "true") {
        title = "发出商品明细表";
      } else {
        title = "发货通知明细表";
      }
      this.printName = title;
      this.printData.forEach((obj) => {
        obj.id = number++;
      });
      this.printStatus = true;
      setTimeout(() => {
        this.$print(this.$refs.startPrint.$refs.print);
      }, 0);
    },

    // 双击查看物料
    handleView(row) {
      this.$router.push({
        path: "/om/sales/deliverview",
        query: {
          detailCode: row.omCode,
          open: "seeStatus",
          workType: this.$route.query.workType,
          fmConfig: this.$route.query.fmConfig,
        },
      });
    },

    // 小数位数
    getDecimal() {
      if (this.basicfileList.length > 0) {
        this.basicfileList.forEach((item) => {
          if (item.outQuantity !== null && item.outQuantity !== undefined) {
            item.outQuantity = parseFloat(item.outQuantity).toFixed(
              this.parametersSetting.decimalPrice
            );
          }
          if (item.quantity !== null && item.quantity !== undefined) {
            item.quantity = parseFloat(item.quantity).toFixed(
              this.parametersSetting.decimalQuantity
            );
          }
          if (
            item.notOutQuantity !== null &&
            item.notOutQuantity !== undefined
          ) {
            item.notOutQuantity = parseFloat(item.notOutQuantity).toFixed(2);
          }
          if (item.wiQuantity !== null && item.wiQuantity !== undefined) {
            item.wiQuantity = parseFloat(item.wiQuantity).toFixed(2);
          }
          if (
            item.notWiQuantity !== null &&
            item.notWiQuantity !== undefined
          ) {
            item.notWiQuantity = parseFloat(item.notWiQuantity).toFixed(2);
          }
        });
      }
    },
    /*获取当月1号 */
    timeMounceDay(date) {
      let time = new Date(date);
      return time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + 1;
    },

    //时间+23时59分59秒
    setTime(date) {
      date.setHours(date.getHours() + 23);
      date.setMinutes(date.getMinutes() + 59);
      date.setSeconds(date.getSeconds() + 59);
      let time = new Date(date);
      return (
        time.getFullYear() +
        "-" +
        (time.getMonth() + 1) +
        "-" +
        time.getDate() +
        " " +
        time.getHours() +
        ":" +
        time.getMinutes() +
        ":" +
        time.getSeconds()
      );
    },

    //搜索表单重置
    serchReset() {
      for (let key in this.searchForm) {
        this.searchForm[key] = "";
      }
    },
  },

  components: {
    PrintPage,
  },
};
</script>
<style lang="scss">
.om-report-box {
  .el-range-editor--medium.el-input__inner {
    height: 32px;
  }

  .el-range-editor--medium .el-range__icon,
  .el-range-editor--medium .el-range__close-icon,
  .el-range-editor--medium .el-range__icon,
  .el-range-editor--medium .el-range__close-icon,
  .el-range-editor--medium .el-range-separator {
    line-height: 24px;
  }
  .el-table .warning-row {
    background-color: #f5f7fa;
  }

  .el-select {
    width: 150px;
    .el-input {
      width: 150px !important;
    }
    margin-right: 15px;
    .el-input__inner {
      width: 150px;
    }
  }

  .el-input--medium .el-input__icon {
    line-height: 28px;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .top-box {
    display: flex;
    align-items: center;

    .el-input {
      width: 200px;
      margin-right: 15px;
    }

    .el-date-editor {
      margin-right: 15px;
    }
  }

  .el-table .warning-row {
    .red-scarlet {
      color: #fc6a6a;
    }
  }

  .txt-right {
    input {
      text-align: right;
    }
  }
}
</style>
